<template>
  <div class="card amap-example">
    <div class="amap-options">
      <el-button @click="handlerSearch">查询</el-button>
      <el-button @click="handlerStart">开始</el-button>
      <el-button @click="handlerPause">暂停</el-button>
      <el-button @click="handlerResume">继续</el-button>
      <el-button @click="handlerStop">停止</el-button>
    </div>
    <div class="amap-explore">
      <AmapUI ref="amapUIRef" :opts="opts" :modules="modules" />
    </div>
  </div>
</template>

<script setup lang="ts" name="amapExample">
import { ref, reactive, nextTick } from "vue";
import AmapUI from "@/components/AmapUI/index.vue";
import type { AmapModulesOptions, MapBaseOptions } from "@/components/AmapUI/types";
import { path, stopovers, origin, getInfoWindowTemplate } from "./mock";

const opts = reactive<MapBaseOptions>({
  center: [116.397428, 39.90923],
  zoom: 4
});
const modules = ref<AmapModulesOptions[]>([]);

const amapUIRef = ref<InstanceType<typeof AmapUI> | null>(null);

const polylineModules = ref<any>();
const handlerSearch = () => {
  modules.value = [
    {
      name: "Polyline",
      markers: [
        {
          path,
          strokeColor: "#409eff", //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 4, //线宽
          cursor: "pointer",
          extra: {
            origin, // 一条轨迹的原始数据
            stopovers, // 停留点
            infoWindowOpts: {
              // 自定义弹窗内容
              isCustom: true,
              closeWhenClickMap: true,
              content: (e: any) => getInfoWindowTemplate(e)
            }
          }
        }
      ],
      extra: {
        coordTransform: "wgs84ToGcj02", // 1.中交慧联 不转换坐标 2.中交兴路 转坐标
        isStopovers: true, // 是否开启显示停留点
        isLabeled: true, // 是否标注走过的点位
        relieveInfoWindow: false // 是否禁用标注点弹窗
      }
    }
  ];
  nextTick(() => {
    amapUIRef.value?.loadModules().then(res => {
      console.log(res, "--=0-");
      // 确保res[0]和res[0].instance存在
      if (res && res[0] && res[0].moduleInstance) {
        polylineModules.value = res[0].moduleInstance; // 获取实例,用于播放，暂停，继续，停止

        // 注册percentChange事件监听
        res[0].moduleInstance?.instance.forEach(item => {
          item.on("percentChange", percent => {
            console.log("行驶的进度:", percent);
            // emit("percentChange", percent); // 可在这里传输进度，控制倍速
          });
        });
        // 绑定关闭信息窗口方法到window对象
        (window as any).closeInfoWindow = () => {
          const polylineModule = amapUIRef.value?.getModule("Polyline");
          console.log(polylineModule, "polylineModule");
          if (polylineModule && polylineModule.moduleInstance) {
            polylineModule.moduleInstance.events.closeInfoWindow();
          }
        };
      }
    });
  });
};

const handlerStart = () => {
  polylineModules.value?.instance?.forEach(item => {
    item.methods.start();
  });
};

const handlerPause = () => {
  polylineModules.value?.instance?.forEach(item => {
    item.methods.pause();
  });
};

const handlerResume = () => {
  polylineModules.value?.instance?.forEach(item => {
    item.methods.resume();
  });
};

const handlerStop = () => {
  polylineModules.value?.instance?.forEach(item => {
    item.methods.stop();
  });
};
</script>
<style lang="scss" scoped>
.amap-example {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.amap-options {
  display: flex;
  flex-direction: column;
}
.amap-explore {
  width: calc(100% - 100px);
  height: 100%;
}
</style>
